<template>
  <div class="app-container">
    <!-- 上传按钮 -->
    <button class="upload-btn" @click="showUploadForm = true">{{$t('uploadphysicalExamination')}}</button>

    <!-- 上传表单弹窗 --> 
    <div v-if="showUploadForm" class="upload-modal">
      <div class="upload-form">
        <h2>{{$t('uploadphysicalExamination')}}</h2>
        <form @submit.prevent="handleSubmit">
          <div class="form-group">
            <label>{{ $t('reportType') }}</label>
            <input type="text" v-model="form.title" required>
          </div>
          <div class="form-group">
            <label>{{ $t('selectFile') }}</label>
            <input type="file" @change="handleFileChange" required>
          </div>
          <div class="form-actions">
            <button type="button" @click="showUploadForm = false">{{ $t('cancelBtn') }}</button>
            <button type="submit">{{ $t('submitBtn') }}</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 报告列表表格 -->
    <div class="report-table">
      <table>
        <thead>
          <tr>
            <th>{{ $t('reportId') }}</th>
            <th>{{ $t('reportType') }}</th>
            <th>{{ $t('submitTime') }}</th>
            <th>{{$t('handle')}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(report, index) in sortedReports" :key="report.id">
            <td>{{ index + 1 }}</td>
            <td>{{ report.title }}</td>
            <td>{{ formatDate(report.uploadTime) }}</td>
            <td class="actions">
              <button class="view-btn" @click="viewReport(report)">{{ $t('viewBtn') }}</button>
              <button class="delete-btn" @click="deleteReport(report.id)">{{ $t('deleteBtn') }}</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showUploadForm: false,
      form: {
        title: '',
        file: null
      },
      reports: []
    }
  },
  computed: {
    sortedReports() {
      return [...this.reports].sort((a, b) => new Date(a.uploadTime) - new Date(b.uploadTime));
    }
  },
  methods: {
    handleFileChange(event) {
      this.form.file = event.target.files[0];
    },
    handleSubmit() {
    if (!this.form.file) {
      alert('请选择文件');
      return;
    }
    
    const newReport = {
      id: Date.now(), // 确保唯一ID
      title: this.form.title,
      file: this.form.file,
      uploadTime: new Date()
    };
    
    this.reports.unshift(newReport);
    this.form = { title: '', file: null };
    this.showUploadForm = false;
  },
    viewReport(report) {
      const fileUrl = URL.createObjectURL(report.file);
      window.open(fileUrl, '_blank');
    },
    deleteReport(id) {
      this.reports = this.reports.filter(report => report.id !== id);
    },
    formatDate(date) {
      return date.toLocaleString();
    }
  }
}
</script>

<style scoped>
.app-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.upload-btn {
  background-color: #4a90e2;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}

.upload-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.upload-form {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
}

.upload-form h2 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button[type="submit"],.form-actions button[type="button"]{
  background-color: #4a90e2;
  color: white;
  border: none;
}

.report-table {
  width: 100%;
  overflow-x: auto;
  margin-top: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.report-table table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
  padding: 16px 12px;
  text-align: center; 
  vertical-align: middle; 
  border-bottom: 2px solid #e9ecef;
  height: 60px; 
}

.report-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
  vertical-align: middle; 
}

.actions {
  display: flex;
  justify-content: center; 
  gap: 8px;
}
.actions button {
  padding: 5px 10px;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}


.delete-btn{
  background-color:#f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
}
.view-btn{
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
}
</style>